<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span class="header">地市项目批复汇总</span>
      </div>
      <div class="title">全区总规模 4360万千瓦</div>
      <div class="top-content">
        <div class="part">
          <div class="num">2860万千瓦</div>
          <div class="label">光伏治沙项目容量</div>
        </div>
        <div class="line"></div>
        <div class="part">
          <div class="num">1500万千瓦</div>
          <div class="label">风电</div>
        </div>
      </div>
      <div id="summaryChart" style="width:100%;height: 380px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'summaryTable',
  data() {
    return {
      summaryList: [
        { value: 195, name: '鄂尔多斯',unit:'内蒙古能源集团有限责任公司',scale:'2024' },
        { value: 8, name: '兴安盟',unit:'中广核新能源内蒙古分公司',scale:'60' },
        { value: 33.28, name: '巴彦淖尔市',unit:'华能乌拉特中旗新能源发电有限公司',scale:'1590' },
        { value: 44, name: '乌兰察布市',unit:'大唐(内蒙古)能源开发有限公司',scale:'300' },
        { value: 23.07, name: '赤峰市',unit:'国家能源集团龙源电力',scale:'400' },
        { value: 51.6, name: '通辽市' ,unit:'国家电力投资集团有限公司',scale:'350'},
        { value: 59.96, name: '阿拉善盟' ,unit:'内蒙古华腾公司',scale:'410'},
        { value: 142.8, name: '锡林郭勒盟',unit:'京能集团',scale:'890' }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      //页面大小适配
      var chartDom = document.getElementById('summaryChart')
      let myChart = echarts.init(chartDom)
      const chartObserver = new ResizeObserver(() => {
        myChart.resize()
      })
      chartObserver.observe(chartDom)
      //图表样式
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('summaryChart')
      const chart = echarts.init(ctx)
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          show: true,
          formatter: function (params) {
            var res = '区域: '+ params.name +'<br/>';
            res +='牵头单位: '+ params.data.unit +'<br/>';
            res += '装机规模: ' + params.data.scale +'万千瓦'+ '<br/>' ;
            res += '治理面积: ' + params.value + '万亩' + '<br/>';
            return res;
          },
          position: [50, 50]
        },
        legend: {
          orient: 'vertical',
          textStyle: {
            align: 'right'
          },
          top: '22%',
          right: '0%'
        },
        color: ['#9a60b4', '#4774cc', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              // 设置标签显示信息和格式
              show: false,
              position: 'inner',
              fontSize: 12,
              color: '#ffffff',
              formatter: '{d}%',
              rich: {
                a: {
                  color: '#5ddeE6',
                  align: 'left',
                  padding: 4
                },
                b: {
                  color: '#207e8e',
                  align: 'left',
                  padding: 4
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.summaryList
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
  height: 574px;

  .header {
    color: #11A983;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 12px;
  }
  .top-content{
    display: flex;
    align-items: center;
    justify-content: center;

    .part{
      padding: 10px;

      .num{
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        background: #91cc75;
        border-radius: 4px;
        padding: 5px 10px;
      }
      .label{
        text-align: center;
      }
    }

    .line{
      border: 1px solid #73757a;
      height: 35px;
    }
  }

}
</style>
